import { createRouter, createWebHistory } from 'vue-router'
import { ElMessage } from 'element-plus'

// 配置路由映射关系
const routes = [
  {
    path: '/login',
    name: 'Login',
    meta: {
      title: '登录'
    },
    component: () => import('../pages/Login/index.vue')
  },
  {
    path: '/',
    name: 'Home',
    redirect: '/home',    // 重定向
    meta: {
      title: '首页'
    },
    component: () => import('../pages/Home/index.vue'),
    // 嵌套二级路由
    children: [
      {
        path: 'home',
        name: 'Welcome',
        meta: {
          title: '首页'
        },
        component: () => import ('../components/Welcome/index.vue')
      },
      {
        path: 'list',
        name: 'List',
        meta: {
          title: '列表'
        },
        component: () => import('../components/List/index.vue')
      }
    ]
  },
  // 404 页面
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    meta: {
      title: '页面找不到'
    },
    component: () => import('../pages/404/index.vue')
  }
]
const router = createRouter({
  linkActiveClass: 'routeractive',    // 选中的 router-link 会被添加上该样式
  history: createWebHistory(),
  // 配置记录页面滚动条的效果
  scrollBehavior: (to, from, savePosition) => {
    // 页面有滚动条 savePosition 才有值
    if (savePosition) {
      return savePosition
    } else {
      // 如果页面没有滚动条我们就return一个0 注意，如果是 vue2 这里好像是用的 X Y 不是 top left
      return {
        top: 0,
      }
    }
  },
  routes,
})

// 路由守卫
const whiteUrl = ['/login'] // 域名白名单
// 导航前置守卫
router.beforeEach((to, from, next) => {
  const userName = localStorage.getItem('username')
  // 如果要跳转的页面在域名白名单中或者能读取到用户的token则正常跳转
  if (whiteUrl.includes(to.path) || userName) {
    // console.log('正常放行', to.path)

    next() // 正常放行就执行 next() 即可
  } else {
    console.log('没有权限需要登录')
    ElMessage('请先登录！')
    // 否则就拦截下来，不然跳转
    next({
      name: 'Login',
    }) // 导航到登录页
  }
})
// 路由后置守卫
router.afterEach((to, from) => {
  // console.log('后置守卫', to, from);
  // 在此全局更新跳转后的页面的title
  document.title = to.meta.title ? to.meta.title : '后台管理系统'
})

export default router